『Refactoring UI』
https://gyazo.com/74a6661bf9b35a56a7d2f7f6f1bba4b4
クソ高いので会社に買ってもらったmrsekut.icon
$99
15,000円ぐらいしたぞ...
200ページ程度しかなく、図も多いので割とさくさく進む
全体を通してNG例、OK例の具体例をちゃんと示しているのが良い
目次
Starting from Scratch
著者がエンジニアというのもあってか、エンジニアリングと親和性が高いmrsekut.icon
デザインから考えるのではなく、機能から考えろ
デザインの個性
フォントとか色とかの要素の選択の積み重ね
だが、常に無限の選択肢の中から選択するのは骨が折れる
Hierarchy is Everything
UIのメリハリの付け方
情報に優先順位をつけて表示しよう、ということ
Layout and Spacing
Designing Text
Working with Color
HSLは人間の目が直感的に感じる属性を使って色を指定できる ただ単純に機械的に決めても上手く行かず、ちょっとコツが要る
面白いけど、HSLに馴染みにがないので頭に入りづらかったmrsekut.icon
Creating Depth
Emulate a light source
要素が背景から浮き上がっていたり、はめ込まれているように見えるUIについて
絵を描ける人なら当然知ってるだろうみたいな内容だなmrsekut.icon
それと、最近のweb designだとあまりそういう凹凸つけないよなあ
Use shadows to convey elevation
Shadows can have two parts
Working with Images
Use good photos
174
Text needs consistent contrast
176
Everything has an intended size
181
Beware user-uploaded content
187
Finishing Touches
もっと各要素をメリハリつけようぜ、みたいな章かな
Supercharge the defaults
192
Add color with accent borders
195
Decorate your backgrounds
198
Don’t overlook empty states
203
Use fewer borders
Think outside the box
先入観にとらわれるな！
Leveling Up
Leveling up